<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员:">
                <a-input v-model="keywords" placeholder="搜索学员(回车搜索)" style="width: 80%" @pressEnter="handerStudent">
                  <a-tooltip slot="suffix" title="请搜索学员">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="handerStudent" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="课消日期:">
                <a-range-picker style="width: 80%" @change="dateChane" :disabled-date="disabledDate" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="报读课程:" allowClear>
                <a-select v-model="queryParam.course_id" allowClear placeholder="请选择报读课程" style="width: 80%">
                  <a-select-option v-for="(item, index) in courseList" :key="index" :value="item.id">{{
                    item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <div v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="课消类型">
                  <a-select v-model="queryParam.price_type" allowClear placeholder="请选择课消类型" style="width: 80%">
                    <a-select-option value="1">课时课消</a-select-option>
                    <a-select-option value="2">按天课消</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="课消来源">
                  <a-select v-model="queryParam.type" allowClear placeholder="请选择课消类型" style="width: 80%">
                    <a-select-option :value="1">点名</a-select-option>
                    <a-select-option :value="2">按天自动消耗</a-select-option>
                    <a-select-option :value="3">修改点名记录</a-select-option>
                    <a-select-option :value="4">撤销点名记录</a-select-option>
                    <a-select-option :value="5">课时清零</a-select-option>
                    <a-select-option :value="6">补扣超上课时</a-select-option>
                    <a-select-option :value="7">结课</a-select-option>
                    <a-select-option :value="8">撤销结课</a-select-option>
                    <a-select-option :value="9">按课时初始课消</a-select-option>
                    <a-select-option :value="10">修正剩余课时</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="课消状态:" allowClear>
                  <a-checkbox @change="filterOnChange" :checked="queryParam.un_abolish"> 过滤已作废 </a-checkbox>
                </a-form-item>
              </a-col>
            </div>
          </a-row>
        </a-form>
      </div>
      <a style="cursor: pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor: pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div style="padding: 5px 0">
        <a-button @click="handleexportfile">导出</a-button>
      </div>
      <a-alert type="warning" :showIcon="false" class="expand_warning"
        style="margin: 10px 0; padding: 5px 15px; border: none">
        <span slot="description">课消金额：￥{{ classConsumesPrice }}</span>
      </a-alert>
      <s-table ref="table" size="default" rowKey="key" :columns="columns" :data="loadData" style="margin-top: 10px"
        class="user_management_table" :pagination="pagination">
        <span slot="created_at" slot-scope="text,record">
          {{ record.created_at }} <span v-if="record.use_type == 2">
            <a-tag>已废除</a-tag>
          </span>
        </span>
        <span slot="price_type" slot-scope="text, record">
          <span v-if="record.price_type == 1">课时消耗</span>
          <span v-if="record.price_type == 2">按天消耗</span>
        </span>
        <span slot="type" slot-scope="text, record">
          <span v-if="record.type == 1">点名</span>
          <span v-if="record.type == 2">按天自动消耗</span>
          <span v-if="record.type == 3">修改点名记录</span>
          <span v-if="record.type == 4">撤销点名记录</span>
          <span v-if="record.type == 5">课时清零</span>
          <span v-if="record.type == 6">补扣超上课时</span>
          <span v-if="record.type == 7">结课</span>
          <span v-if="record.type == 8">撤销结课</span>
          <span v-if="record.type == 9">按课时初始课消</span>
          <span v-if="record.type == 10">修正剩余课时</span>
        </span>

        <span slot="price" slot-scope="text, record">
          ￥{{
            (
              (Number(record.orderContent.signing_price) / Number(record.orderContent.buy_number)) *
              Number(record.buy_number)
            ).toFixed(2)
          }}
        </span>
        <span slot="daynumber" slot-scope="text, record">
          <span v-if="record.price_type == 1">消耗{{ record.buy_number + record.give_number }}课时</span>
          <span v-if="record.price_type == 2">消耗{{ record.buy_number + record.give_number }}天</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="showModal(record)">查看详情</a>
        </span>
      </s-table>
      <a-modal title="查看详情" :visible="visible" :width="860" :footer="null" :afterClose="closemodal"
        @cancel="handleCancel" :bodyStyle="{ 'padding-top': '10px' }">
        <div>
          <p class="subtitle">
            课消来源：
            <span v-if="detilData.type == 1">点名</span>
            <span v-if="detilData.type == 2">按天自动消耗</span>
            <span v-if="detilData.type == 3">修改点名记录</span>
            <span v-if="detilData.type == 4">撤销点名记录</span>
            <span v-if="detilData.type == 5">课时清零</span>
            <span v-if="detilData.type == 6">补扣超上课时</span>
            <span v-if="detilData.type == 7">结课</span>
            <span v-if="detilData.type == 8">撤销结课</span>
            <span v-if="detilData.type == 9">按课时初始课消</span>
            <span v-if="detilData.type == 10">修正剩余课时</span>
          </p>
          <div class="detail-box">
            <a-row>
              <a-col :span="12">
                <div class="info-item">
                  <span class="word">学员姓名:</span>
                  <!-- {{detilData.student.name}} -->
                  <span class="texta" v-if="detilData.student">{{ detilData.student.name }}</span>
                </div>
                <div class="info-item">
                  <span class="word">课程名称:</span>
                  <span class="texta" v-if="detilData.course">{{ detilData.course.name }}</span>
                </div>

                <div class="info-item" v-if="detilData.type == 1 || detilData.type == 3 || detilData.type == 6">
                  <span class="word">到课状态:</span>
                  <span v-if="detilData.callRecord">
                    <span class="texta" v-if="detilData.callRecord.type == 1">到课</span>
                    <span class="texta" v-if="detilData.callRecord.type == 2">迟到</span>
                    <span class="texta" v-if="detilData.callRecord.type == 3">请假</span>
                    <span class="texta" v-if="detilData.callRecord.type == 4">未到</span>
                  </span>
                  <span class="texta" v-else>-</span>
                </div>

                <div class="info-item">
                  <span class="word">天数变更:</span>
                  <span class="texta">
                    <span v-if="detilData.price_type == 1">
                      <span>消耗</span>
                      {{ detilData.buy_number + detilData.give_number }}课时
                    </span>
                    <span v-if="detilData.price_type == 2">消耗{{ detilData.buy_number + detilData.give_number }}天</span>
                  </span>
                </div>
                <div class="info-item">
                  <span class="word">课消时间:</span>
                  <span class="texta" v-if="detilData.created_at">{{ detilData.created_at }}</span>
                </div>
              </a-col>
              <a-col v-if="detilData.type == 1" :span="12">
                <div class="info-item">
                  <span class="word">上课班级:</span>
                  <span class="texta" v-if="detilData.callRecord.record.school_class.name">{{
                    detilData.callRecord.record.school_class.name
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课时间:</span>
                  <span class="texta">{{ detilData.callRecord.record.attend_class_day }} {{
                    detilData.callRecord.record.start_time }}~{{
                      detilData.callRecord.record.end_time
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课老师:</span>
                  <span class="texta">{{ detilData.teacher_name || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="word">点名老师:</span>
                  <span class="texta">{{ detilData.callRecord.record.project.name }}</span>
                </div>
                <div class="info-item">
                  <span class="word">点名时间:</span>
                  <span class="texta">{{ detilData.created_at }}</span>
                </div>
              </a-col>
              <a-col v-if="detilData.type == 3" :span="12">
                <div class="info-item">
                  <span class="word">上课班级:</span>
                  <span class="texta" v-if="detilData.callRecord.record.school_class.name">{{
                    detilData.callRecord.record.school_class.name
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课时间:</span>
                  <span class="texta">{{ detilData.callRecord.record.attend_class_day }} {{
                    detilData.callRecord.record.start_time }}~{{
                      detilData.callRecord.record.end_time
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课老师:</span>
                  <span class="texta">{{ detilData.teacher_name || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="word">操作人:</span>
                  <span class="texta">{{ detilData.callRecord.record.project.name }}</span>
                </div>
                <div class="info-item">
                  <span class="word">点名时间:</span>
                  <span class="texta">{{ detilData.created_at }}</span>
                </div>
              </a-col>
              <!-- 课时清零 -->
              <a-col v-if="detilData.type == 5 || detilData.type == 7 || detilData.type == 8">
                <div class="info-item">
                  <span class="word">操作人:</span>
                  <span class="texta">{{ detilData.operator.name || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="word">操作时间:</span>
                  <span class="texta">{{ detilData.operator_time | formatDate || '-' }}</span>
                  <!--  -->
                </div>
              </a-col>
              <!-- 补扣超上课时 -->
              <a-col v-if="detilData.type == 6 && detilData.callRecord">
                <div class="info-item">
                  <span class="word">上课班级:</span>
                  <span class="texta" v-if="detilData.callRecord.record.school_class.name">{{
                    detilData.callRecord.record.school_class.name
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课时间:</span>
                  <span class="texta">{{ detilData.callRecord.record.attend_class_day }} {{
                    detilData.callRecord.record.start_time }}~{{
                      detilData.callRecord.record.end_time
                    }}</span>
                </div>
                <div class="info-item">
                  <span class="word">上课老师:</span>
                  <span class="texta">{{ detilData.teacher_name || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="word">点名老师:</span>
                  <span class="texta">{{ detilData.callRecord.record.project.name }}</span>
                </div>
                <div class="info-item">
                  <span class="word">点名时间:</span>
                  <span class="texta">{{ detilData.created_at }}</span>
                </div>
              </a-col>
            </a-row>
          </div>
          <p class="subtitle">消耗订单</p>
          <div>
            <a-table :columns="columns1" :data-source="orderList" style="border: 1px solid #e8e8e8"
              class="user_management_table" :pagination="false" :scroll="{ y: 300 }">
              <span slot="order_no" slot-scope="text, record">
                <a @click="godetailes(record.orderContent.order.id)">{{ record.orderContent.order.order_no }}</a>
              </span>
              <span slot="courseName" slot-scope="text, record">
                <a-tooltip placement="topLeft">
                  <template slot="title">{{ record.course.name }}</template>
                  {{ record.course.name }}
                </a-tooltip>
              </span>
              <span slot="price" slot-scope="text, record">
                <span v-if="record.price_type == 1">{{ (record.orderContent.signing_price /
                  record.orderContent.buy_number).toFixed(2)
                  }}/课时</span>
                <span v-if="record.price_type == 2">{{ record.price }}/天</span>
              </span>
              <span slot="xiaohaonumber" slot-scope="text, record">
                <span v-if="record.price_type == 1">{{ record.buy_number }}课时</span>
                <span v-if="record.price_type == 2">{{ record.buy_number }}天</span>
              </span>
              <span slot="give_number" slot-scope="text, record">
                <span v-if="record.price_type == 1">{{ record.give_number }}课时</span>
                <span v-if="record.price_type == 2">{{ record.give_number }}天</span>
              </span>

              <span slot="xiaohaoprice" slot-scope="text, record">{{
                (
                  (Number(record.orderContent.signing_price) / Number(record.orderContent.buy_number)) *
                  Number(record.buy_number)
                ).toFixed(2)
              }}</span>
            </a-table>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { CancelclassList, exportfile, sumPrice } from '@/api/classconsumes'
import { accountList } from '@/api/account'
import { coursesList } from '@/api/courseCharge'
import moment from 'moment'
export default {
  name: 'order',
  components: {
    STable,
  },
  data() {
    return {
      pagination: {
        showTotal: total => `共${total}条数据`,
      },
      loading: false,
      student: '',
      handled: '',
      followUpPerson: '',
      is_arrears: null,
      datevalue1: [],
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      description: '信息',
      subjectList: [],
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      showDrawer: false,
      confirmLoading: false,
      schoolID: null,
      // 查询参数
      keywords: '',

      queryParam: {
        school_id: this.$store.state.user.school,
        un_abolish: true
      },
      columns: [
        {
          title: '课消时间',
          // dataIndex: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
        {
          title: '学员姓名',
          dataIndex: 'student.name',
        },
        {
          title: '课程名称',
          dataIndex: 'course.name',
        },
        {
          title: '课消类型',
          dataIndex: 'price_type',
          scopedSlots: { customRender: 'price_type' },
        },
        {
          title: '课消来源',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        // 新加字段后端暂无数据
        {
          title: '课程老师',
          dataIndex: 'course.teater',
        },
        {
          title: '课消课时/天数',
          dataIndex: '',
          scopedSlots: { customRender: 'daynumber' },
        },
        {
          title: '课消金额',
          dataIndex: 'price',
          scopedSlots: { customRender: 'price' },
        },
        // {
        //   title: '时间/数量',
        //   dataIndex: 'purchase_at',
        //   align: 'center'
        // },
        {
          title: '操作',

          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: (parameter) => {
        return CancelclassList(
          Object.assign(parameter, this.queryParam, {
            keywords: this.keywords || undefined,
          })
        ).then((res) => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      //弹窗
      visible: false,
      columns1: [
        {
          title: '订单号',
          dataIndex: 'orderContent.order.order_no',
          scopedSlots: { customRender: 'order_no' },
          width: 250,
          ellipsis: true,
        },
        {
          title: '购买课程',
          dataIndex: 'course.name',
          scopedSlots: { customRender: 'courseName' },
          width: 100,
          ellipsis: true,
        },
        {
          title: '单价',
          dataIndex: 'price',
          scopedSlots: { customRender: 'price' },
          width: 110,
          ellipsis: true,
        },
        {
          title: '消耗购买数量',
          dataIndex: 'xiaohaonumber',
          scopedSlots: { customRender: 'xiaohaonumber' },
          ellipsis: true,
        },
        {
          title: '消耗赠送数量',
          dataIndex: 'give_number',
          scopedSlots: { customRender: 'give_number' },
          ellipsis: true,
        },
        {
          title: '消耗金额',
          dataIndex: 'xiaohaoprice',
          scopedSlots: { customRender: 'xiaohaoprice' },
          width: 100,
          ellipsis: true,
        },
      ],
      orderList: [],
      courseList: [],
      detilData: {},
      classConsumesPrice: null,
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
        this.classConsumes()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true,
    },
  },
  created() {
    accountList({
      is_on_job: 1,
      school_id: this.$store.state.user.school,
      pageSize: 999999,
    })
      .then((res) => {
        this.subjectList = res.data
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取失败')
      })
    coursesList({ school_id: this.$store.state.user.school, pageSize: 9999999999 })
      .then((res) => {
        this.courseList = res.data
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取课程列表失败')
      })
    this.classConsumes()
  },
  methods: {
    filterOnChange(e) {
      if (e.target.checked) {
        this.queryParam.un_abolish = true
      }
      else {
        this.queryParam.un_abolish = false
      }
      this.classConsumes()
    },
    handerStudent() {
      this.$refs.table.refresh()
      this.classConsumes()
    },
    moment,
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //日期
    dateChane(value, date) {
      this.queryParam.start_time = date[0]
      this.queryParam.end_time = date[1]
      this.$refs.table.refresh()
      this.classConsumes()
    },
    disabledDate(current) {
      return current && current > moment(new Date()).add(1, 'days')
    },
    handlePanelChange(value, mode) { },
    handleChange2(e) {
      if (`${e.target.checked}` == 'true') {
        this.queryParam.is_arrears = 1
      }
      if (`${e.target.checked}` == 'false') {
        this.queryParam.is_arrears = ''
      }
      //else{
      //      this.queryParam.is_arrears=2;
      // }
      this.$refs.table.refresh()
    },
    more() {
      this.advanced = !this.advanced
    },
    godetailes(id) {
      this.$router.push({
        name: 'orderdetails',
        query: {
          id: id,
        },
      })
    },
    //弹窗
    showModal(res) {
      this.orderList = []
      this.detilData = res
      this.orderList.push(res)
      this.$nextTick(() => {
        this.visible = true
      })
    },
    closemodal() {
      console.log(this.visible)
    },
    handleCancel(e) {
      this.visible = false
      this.orderList = []
    },
    //课消导出
    handleexportfile() {
      let params = Object.assign(this.queryParam, { keywords: this.keywords || undefined })
      exportfile(params)
        .then((res) => {
          let url = res.url.url
          let path = res.url.path
          window.location.href = url + path
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
    //课消统计
    classConsumes() {
      let params = Object.assign(this.queryParam, { keywords: this.keywords || undefined })
      sumPrice(params)
        .then((res) => {
          this.classConsumesPrice = res.sum_price
        })
        .catch((err) => {
          this.$message.error(err.data.message || '课消金额获取失败')
        })
    },
    godetailes(id) {
      this.$router.push({
        name: 'orderdetails',
        query: {
          id: id,
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}

.btn_margin {
  margin-right: 10px;
}

.form_title {
  div {
    label {
      font-size: 16px !important;
    }
  }
}

#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}

.subtitle {
  color: #333;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.detail-box {
  border: 1px solid #e8e8e8;
  padding: 16px;
  margin-bottom: 24px;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;

  .word {
    color: #666;
    // flex-shrink: 0;
    padding-right: 10px;
  }

  .texta {
    color: #333;
    margin-right: 8px;
    font-size: 14px;
    max-width: 290px;
    line-height: normal;
    vertical-align: top;
  }
}
</style>